<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <title>Handtrack.js : A library for prototyping realtime handtracking in the browser. </title>
  <link rel="stylesheet" href="https://unpkg.com/carbon-components@latest/css/carbon-components.css" />
  <link rel="stylesheet" href="css/track.css">
</head>

<body class="bx--body p20">
  <!-- <img id="img" src="hand.jpg"/>  -->
  <div class="p20">
    Handtrack.js allows you prototype handtracking interactions in the browser in 3 lines of code.
  </div>
  <div class="mb10">
    <button  id="trackbutton" class="bx--btn bx--btn--secondary" type="button" disabled>
      Toggle Video
    </button>
    <button id="nextimagebutton" class="mt10 bx--btn bx--btn--secondary" type="button" disabled>
      Next Image
    </button>
    <div id="updatenote" class="updatenote mt10"> loading model ..</div>
  </div>
  <video class="videobox canvasbox" autoplay="autoplay" id="myvideo"></video>
  <canvas id="canvas" class="border canvasbox"></canvas>
  <div class="mt10">
    <img src="images/1.jpg" class="canvasbox  hidden" id="handimage" alt="">

  </div>

  <script src="https://unpkg.com/carbon-components@latest/scripts/carbon-components.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/handtrackjs@latest/dist/handtrack.min.js"> </script>
  <script src="js/index.js"></script>
</body>

</html>